const url = 'http://s1.aizhihong.cn:3000'
function btnAdd() {
  console.log('新增');
  location.href = './add.html'

}
function btnEdit(id) {
  console.log('编辑');
  location.href = './add.html?id=' + id
}
function btnFilter() {
  console.log('过滤');
  let keyword = $('input[name=keyword]').val();
  console.log(keyword);

  axios.get(`${url}/blogs?keyword=${keyword}`)
    .then((res) => {
      console.log("响应数据:", res);
      let blogs = res.data.data;
      console.log("获取到的博客数据:", blogs);
      // 移除所有现有的数据行
      const oldRows = $('tr[class^=blog]');
      console.log("移除前旧数据行数:", oldRows.length);
      oldRows.remove();
      console.log("移除后旧数据行数:", $('tr[class^=blog]').length);
      console.log('旧数据行已移除');

      let html = '';
      blogs.forEach(item => {
        html += `
                <tr class="blog${item.id}">
                    <td class="one">${item.id}</td>
                    <td class="two">${item.title}</td>
                    <td class="three text">Spring Boot 是基于 Spring 框架的一个开源 Java 框架，由 Pivotal 团队（现在是 VMware 的一部分）开发。</td> 
                    <td class="four">${item.author}</td>
                    <td class="five">
                        <input type="button" value="编辑" class="operation" onclick="btnEdit(${item.id})">
                        <input type="button" value="删除" class="operation" onclick="btnDel(${item.id})">
                    </td>
                </tr>
            `;
      });
      $('tbody').append(html);
    })
    .catch((error) => {
      console.error('请求出错:', error);
    });
}
function btnDel(id) {
  console.log('删除');
  /*
      1. 拿到数据
      2. 向后端发请求
      3. 处理后端返回的响应
  */
  if (confirm('确认删除吗？')) {
    axios.delete(`${url}/blogs/${id}`).then((res) => {
      console.log(res);
      let data = res.data;
      if (data.code === 200) {
        // 删除成功
        let tr = document.querySelector(`.blog${id}`)
        tr.remove()
      } else {
        // 删除不成功
        confirm(`${data.msg}`)
      }

    })
  }


}
async function btnSave() {
  console.log('保存');
  /*
      这里做的事大致如下：
      1. 拿到（表单）数据
      2. 将拿到的数据，通过工具向后端发送
      3. 后端处理，返回结果，根据结果做进一步的处理
  */
  // let title = document.querySelector('[name=title]').value;
  let id = new URLSearchParams(location.search).get('id') || 0;

  let title = $('[name=title]').val()
  let author = $('[name=author]').val()
  //数据校验
  title.trim()
  author.trim()
  let obj = { title, author }
  console.log(obj);

  if (id > 0) {
    //第二步请求修改
    axios.put(`${url}/blogs/${id}`, obj).then((res) => {
      console.log(res);
      if (res.data.code === 200) {
        location.href = './index.html'
      } else {
        confirm(res.data.msg)
      }
    })
  } else {
    //第二步请求新增
    axios.post(`${url}/blogs`, obj).then((res) => {
      console.log(res);
      if (res.data.code === 200) {
        location.href = './index.html'
      } else {
        confirm(res.data.msg)
      }
    })
  }



}
function btnCancel() {
  console.log('取消');

  location.href = './index.html'
}


